import {receiptRecordActive} from '@/services/api/api-cues-active';
import { DrawerForm } from '@ant-design/pro-form';
import { useState } from 'react';
import {ProList, ProTable} from "@ant-design/pro-components";

interface ReceiptActiveProps {
  id: string;
  receipt: string;
}
type DataItem = {
  id: string;
  organizationName:string;
  accountName:string;
  createdTime:string;
}
const ReceiptActive: React.FC<ReceiptActiveProps> = ({ id, receipt }) => {
  const [dataList,setDataListState] = useState<DataItem[]>();
  const [total, setTotal] = useState<number>(0); // 新增总条目数状态
  const [currentPage, setCurrentPage] = useState<number>(1); // 当前页码
  const loadDataList = async (params ) => {
    const response = await receiptRecordActive({
      id,
      pageSize:20,
      current:params??currentPage,
    });
    setDataListState(response.data.data || []); // 避免设置为 undefined
    setTotal(response.data.total || 0); // 获取总条目数
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '单位名称',
      dataIndex: 'organizationName',
    },
    {
      title: '阅读人',
      dataIndex: 'accountName',
    },
    {
      title: '阅读时间',
      key: 'createdTime',
      dataIndex: 'createdTime',
      valueType: 'datetime',
      hideInSearch: true,
    },

  ];

  return (
    <DrawerForm
      title="阅读情况"
      trigger={<a>{receipt}</a>}
      drawerProps={{
        size: 'large',
        forceRender: true,
        destroyOnClose: true,
        width: '650px'
      }}
      submitter={false}
      onOpenChange={(visible) => {
        if (visible) {
          loadDataList(); // 加载数据
        }
      }}
    >
      <ProTable<DataItem>
        columns={columns}
        options={false}
        search={false}
        rowKey="id"
        pagination={{
          pageSize: 20,
          total: total, // 设置总数
          current: currentPage, // 设置当前页码
          onChange: (page) => {
            setCurrentPage(page); // 更新当前页码
            loadDataList(page); // 重新加载数据
          },
        }}
        dataSource={dataList}
      />


    </DrawerForm>
  );
};

export default ReceiptActive;
